<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			table#tab{
				border: 1px solid red;
				border-collapse: collapse;
				width: 500px;
			}
			
			table#tab tr,
			table#tab tr th,
			table#tab tr td {
				border: 1px solid red;
		</style>
	</head>
	<body>
		<div id="box">
			<div id="entry">
				<div id="user">
					<label>
						用户名:<input type="text" value="kky" placeholder="请输入姓名" />
					</label><br />
					<label>
						年龄:<input type="number" value=0 />
					</label>
				</div>
				<div id="sex">
					性别<br/>
					<label>
						男:<input type="radio" name="sex" value=0 checked />
					</label>	
					<label>
						女:<input type="radio" name="sex" value=1  />
					</label>
				</div>
				<div id="hobby">
					爱好:<br/>
					<label>
						学习 <input type="checkbox" value="h1" />
					</label>
					<label>
						健身 <input type="checkbox" value="h2" />
					</label>
					<label>
						游泳 <input type="checkbox" value="h3" />
					</label>
					<label>
						工作 <input type="checkbox" value="h4" />
					</label>
					<label>
						看电影 <input type="checkbox" value="h5" />
					</label>
					<div>
						<label>
							全选/全不选<input type="checkbox" />
						</label>
						<button type="button">反选</button>
					</div>
				</div>
				<div id="education">
					学历:<br />
					<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select>
				</div>
				<br />
				<div>
					<button type="button" onclick="add()">添加</button>
				</div>
			</div>
			<div id="show">
				<table id="tab">
					<thead>
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						
					</tbody>
					
			</div>
		</div>
		<script>
			
			window.onload = function() {
				//localStorage.arr = JSON.stringify(arr);	//将数据转化成字符串JSON对像，存储在localStorage的arr中；
				if(localStorage.arr) {
					arr = JSON.parse(localStorage.arr);
					show(arr);
				} else {
					arr = [];	//用来接收每条数据
				}
			}
			//var arr=[];//用户存放数据
			//添加数据
			function add(){
				var userIpts=document.querySelectorAll("div#user>label input");
				//console.log("userIpts:",userIpts);
				var user=userIpts[0].value;
				var age=userIpts[1].value;
				var educationSleect=document.querySelector("#education>select")
				if(user&&age){
					var sex=getUserSex();
					console.log("sex:",sex);
					var hobby=getUserHobyy();
					var education=educationSleect.value;
					
					// console.log("user",user);;
					// console.log("age",age);
					// console.log("sex",sex);
					// console.log("hobby",hobby);
					var obj={
						id:+new Date(),
						user:user,
						age:age,
						sex:sex,
						hobby:hobby,
						education:education
					}
					
					arr.push(obj);
					console.log("最新数据:",arr);
					
					
					localStorage.setItem("arr", JSON.stringify(arr));
					show(arr);
					
				}else{
					alert("用户名和年龄不能为空");
				}
			}
			
			//获取用户输入的姓名和年龄
			function getUserSex(){
				var sexIpts=document.querySelectorAll("div#sex>label input");
				//console.log("sexIpts:",sexIpts);
				var sex;
				if(sexIpts[0].checked){
					sex=sexIpts[0].value;
				}else{
					sex=sexIpts[1].value;
				}
				return sex;
			}
			
			//获取用户的选取的爱好
			function getUserHobyy(){
				var hobbyIpts=document.querySelectorAll("div#hobby>label input");
				//console.log("hobbyIpts",hobbyIpts);
				var hobby=[];
				for(var i=0;i<hobbyIpts.length;i++){
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			
			//渲染
			function show(arr) {
				tbody.innerHTML = "";
				for(var i=0; i<arr.length; i++) {
					tbody.innerHTML += `
						<tr >
							<td>${i+1}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].sex}</td>
							<td>${arr[i].hobby}</td>
							<td>${arr[i].education}</td>
							<td><span class="del" onclick="del(${i})">删除</span></td>
						</tr>`
				}
				
			}
			function del(obj) {
				//用id去删除
				var id = arr[obj].id;
				console.log(id);
				console.log(arr);
				for(var i=0; i<arr.length; i++) {
					if(id == arr[i].id) {
						arr.splice(i, 1);
					}
				}
				localStorage.arr = JSON.stringify(arr);
				show(arr);
			}
		</script>
	</body>
</html>
